<script setup name="ChargingItemForm">
import { ref,onMounted } from "vue";
import {selectData1,saveData1,dataSourceTableConst,
        insertFun,tableRef,updateFun,cellClick,
        cellClickConst,deleteFun} 
from "@/utils/InsertDeleteSelectUpdate";


const select1=()=>{
    selectData1('100150',{"vlb":buttonVlbConst.value},"zyhttphosptalserver");
}
const insert1=()=>{

  const insertObj={
  dybl:"1",
  dybl1:"77",
  dydw:"77",
  dydw1:"77",
  dyz:"123",
  hisbm:"人",
  hisdw:"77",
  hismc:"77",
  jm:"",
  lb:"1",
  saveflag: 1 
};
   
  insertObj.lb=buttonVlbConst.value;
  insertFun(insertObj,'jm');
}
const update1=(row ,i)=>{
    updateFun(row,i)
}
const save1=()=>{
    saveData1('100151','zyhttphosptalserver');
    select1();
}
const delete1=()=>{
    deleteFun();
}




//根据点击的菜单列表获取对应的数据源信息，以下是类别信息和获取方法
const buttonVlbConst=ref('1');
//定义左侧列表样式切换的方法就是改选中颜色和字体颜色的方法和变量
const buttonConst=ref('呼吸机');
const buttonConstListCss=ref([
  {a:"#359DE1",b:"#FFFFFF",c:"部门"} ,
  {a:"#fff",b:"#333333",c:"挂号类别"} ,
  {a:"#fff",b:"#333333",c:"财务分类"} ,
  {a:"#fff",b:"#333333",c:"付款方式"} ,
  {a:"#fff",b:"#333333",c:"用药次数"} ,
  {a:"#fff",b:"#333333",c:"服药用法"} ,
  {a:"#fff",b:"#333333",c:"剂型代码表"} ,
  {a:"#fff",b:"#333333",c:"药品材料三医对码"} ,
  {a:"#fff",b:"#333333",c:"医疗卫生机构信息注册"} ,
  {a:"#fff",b:"#333333",c:"医疗卫生人员注册"} ,
  {a:"#fff",b:"#333333",c:"医疗科室信息注册"} ,
  {a:"#fff",b:"#333333",c:"床位信息上传"} 
]);

const buttonConstFun=(buttonValue)=>{
    for(var i=0;i<buttonConstListCss.value.length;i++){
        buttonConst.value=buttonValue;
        if(buttonValue==buttonConstListCss.value[i].c){
            buttonConstListCss.value[i].a="#359DE1"; 
            buttonConstListCss.value[i].b="#FFFFFF";
        }
        else{
            buttonConstListCss.value[i].a="#fff"; 
            buttonConstListCss.value[i].b="#333333";
        }
    }
}
//2.0把标识列的数字转码成删除、修改、新增等文字
const biaoshi = (cellValue ) => {
    if(cellValue=='2')
    {
     return   '待改'
    }
    else if(cellValue=='1')
    {
     return  '待增'
    }
    else if(cellValue=='3')
    {
     return  '待删'
    }
    else if(cellValue=='9')
    {
     return  '待删'
    }
    else
    {
     return ''
    }  
}

onMounted(()=>{
    select1();
});
</script>

<template>
<!-- 最外层灰色内边距8px盒子 -->
<div class="main-content">
    <!-- 次外层白色内边距12px盒子 -->
    <div class="main-content-case">
        <!-- 左侧菜单盒子 -->
        <div class="main-content-left">
            <!-- 循环生成每行菜单 -->
            <div v-for="item in buttonConstListCss" 
                 class="main-content-left-button xpFont" 
                   :style="{background:item.a,color:item.b}" 
                   @click="buttonConstFun(item.c)">
                <img src="@/assets/images/file_icon.png" style="width: 16px;height: 16px;margin-right: 5px;"></img>
                <div>{{item.c}}</div>
            </div>
        </div>  
        <!-- 右侧内容盒子 -->
        <div  class="main-content-right">
            <!--标题盒子20px -->
            <div class="main-content-right-title">
                 {{buttonConst}}
            </div>
            <!-- 按钮盒子52px -->
            <div class="main-content-right-button">
                <div class="button-case">
                    <div class="button-case-box " @click="insert1()">
                    <img
                    src="../../../assets/images/add_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                    <div>新增</div>
                    </div>
                    <div class="button-case-box " @click="delete1()" >
                        <img
                        src="../../../assets/images/del_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div> {{cellClickConst}}</div>  
                    </div>
                    <div class="button-case-box"  > 
                        <img
                            src="../../../assets/images/save_icon.png"
                            style="width: 16px; height: 16px; margin-right: 2px"
                            alt=""
                            srcset=""
                            />
                        <el-popconfirm title="确认保存吗?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="save1()"
                        @cancel="cancelEvent"
                        >
                        <template #reference>
                            <div>保存</div>
                        </template>
                        </el-popconfirm>   
                    </div>   
                    <div class="button-case-box " @click="select1()">
                    <img
                    src="../../../assets/images/replace_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                    <div>刷新</div>
                    </div>
                </div> 
            </div>
            <!-- 分割灰色线盒子17px -->
            <div class="main-content-right-line"></div>
            <!-- 表格盒子 -->
            <div class="main-content-right-table"> 
                <div class="table-case">
                    <vxe-table
                    ref="tableRef"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConst"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1)"   
                    @edit-closed="(row) => update1(row,2)"   
                    @cell-click="(row) => update1(row,3)"   
                >
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field="saveflag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='lb'  title='选择'   width=100   :edit-render="{}">
            </vxe-column>
             <vxe-column field='jm'     title='简码'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='hisbm'   title='his编码'      width=80   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hismc'   title='his名称'      width=200   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='hisdw'   title='his单位'      width=100   :edit-render="{ }">
            </vxe-column>
            <vxe-column field='dybl'     title='转换比例'      width=80   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dyz'     title='对应类别'      width=100   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='lb'     title='对应类别单位'      width=120   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dybl1'     title='手工分离浓缩血小板比例'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='dydw1'     title='手工分离浓缩血小板单位'      width=200   :edit-render="{name: 'input'}">
            </vxe-column>



            </vxe-table> 
            </div>  
            </div>


        </div>
        
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    //左侧菜单盒子
    .main-content-left{
        width: 192px;
        height: 100%;
        
        .main-content-left-button{
            height: 36px;
            width: 100% ;
            padding: 8px;
            display: flex;
            align-items: center;
            border-radius: 4px 4px 4px 4px;
            cursor: pointer; /* 这里设置为pointer，即手指形状 */
        }
    }
    //右侧内容盒子
    .main-content-right{
        width: calc(100% - 193px);
        border-left: 1px solid  #EBEBEB;
        padding-left: 12px;

        background-color: aqua;
        // 标题盒子20px
        .main-content-right-title{
            height: 20px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        } 
        //按钮盒子52px
        .main-content-right-button{
            height: 52px;
            width: 100%;
            background-color: cadetblue;
            .button-case{
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333333;
                height: 100%;
                .button-case-box {
                    display: flex;
                    align-items: center;
                    margin-right: 12px;
                    cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
                }
            }
        }
        //分割灰色线盒子17px
        .main-content-right-line{
            height: 1px;
            background: #EBEBEB;
            margin-bottom: 16px;
        }
        //表格盒子
        .main-content-right-table{
            height: calc(100% - 89px);
            width: 100%;
            background-color: blueviolet;
            .table-case{
                width: 100%;
                height: 100%;
            }
        }

    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>